<template>
  <div class="hello-vue">
    <h2>{{ message }}</h2>
    <p>这是一个在Rspress中使用的Vue组件</p>
    <button @click="count++">点击计数: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = 'Hello from Vue!';
const count = ref(0);
</script>

<style scoped>
.hello-vue {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f5f5f5;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #359469;
}
</style>
